import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:yp/config/style.dart';
import 'package:yp/router.dart';
import 'package:yp/widgets/button_widget.dart';
import 'package:yp/widgets/index.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 申请售后
class ApplyAfterMarket extends StatefulWidget {
  const ApplyAfterMarket({Key key}) : super(key: key);

  @override
  _ApplyAfterMarketState createState() => _ApplyAfterMarketState();
}

class _ApplyAfterMarketState extends State<ApplyAfterMarket>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  /// 售后商品信息列表
  List _goodsList = [
    {
      'num': 3,
      'beginNum': 3,
      'isSelected': false,
      'giftInfo': [
        {'num': 1}
      ]
    },
    {
      'num': 1,
      'beginNum': 1,
      'isSelected': false,
      'giftInfo': [
        {'num': 3},
        {'num': 2}
      ]
    },
    {'num': 4, 'beginNum': 4, 'isSelected': false, 'giftInfo': []},
    {'num': 5, 'beginNum': 5, 'isSelected': false, 'giftInfo': []}
  ];

  bool _afterMarker = false;

  /// 问题照片
  List _imageList = [
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.imgmini.eastday.com%2Fmobile%2F20180730%2F20180730190438_5a722ef53f91678d7f9dd4a7e07ed06d_3.jpeg&refer=http%3A%2F%2F00.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633352348&t=835fbca7723c0160bd9c5541012ad676',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F09.imgmini.eastday.com%2Fmobile%2F20180424%2F20180424202830_cea5602c56efe0e7c20f7c365fc363fc_37.png&refer=http%3A%2F%2F09.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633352348&t=d72a3740a259a68159c3ff2778d4ad67',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F08.imgmini.eastday.com%2Fmobile%2F20180630%2F20180630112557_74e97723a9caa2f6218c135d73b9abe4_3.jpeg&refer=http%3A%2F%2F08.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633352348&t=6bae52c37070f9dc29fa365a6c6b04b9'
  ];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: YPNavigationBar('申请售后'),
      body: Padding(
        padding: EdgeInsets.fromLTRB(
            0, 0, 0, MediaQuery.of(context).padding.bottom + 60),
        child: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: Column(
                children: [
                  _afterMakerList(),
                  YpLine(
                      height: 20,
                      thickness: 20,
                      color: EsColors.BackGroundSecondary),
                  _giftBack(),
                  YpLine(
                      height: 20,
                      thickness: 20,
                      color: EsColors.BackGroundSecondary),
                  _reason()
                ],
              ),
            )
          ],
        ),
      ),
      backgroundColor: EsColors.White,
      floatingActionButton: _bottom(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  /// 申请售后的商品
  Widget _afterMakerList() {
    return ListView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: _goodsList?.length ?? 0,
        itemBuilder: (context, index) => _afterMakerItem(_goodsList[index]));
  }

  /// 商品信息
  Widget _afterMakerItem(Map info) {
    List giftList = info['giftInfo'];
    return Padding(
      padding: const EdgeInsets.fromLTRB(12, 12, 0, 0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                info['isSelected'] = !info['isSelected'];
              });
              print(info['isSelected'] ? '选中' : '取消');
            },
            child: Padding(
              padding: const EdgeInsets.only(top: 30),
              child: Image(
                image: AssetImage(info['isSelected']
                    ? 'assets/images/selectIcon1.png'
                    : 'assets/images/select1.png'),
                width: 48.w,
              ),
            ),
          ),
          Expanded(
            child: Column(
              children: [
                Row(
                  children: [
                    CachedImage(
                        width: 60,
                        height: 60,
                        margin: EdgeInsets.fromLTRB(5, 10, 12, 12),
                        scale: BoxFit.cover,
                        path:
                            'http://imgservice.suning.cn/uimg1/b2c/image/LbK15Wx6ONCA2R1lpJXkOg.jpg_800w_800h_4e'),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text(
                            'KETO铺子 红丝绒夹心蛋糕盛通蛋糕',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                                color: EsColors.TitleSecondary,
                                fontSize: EsSizes.SM,
                                fontWeight: EsFontWeights.Normal),
                          ),
                          SizedBox(height: 20),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Expanded(
                                child: RichText(
                                  // textAlign: TextAlign.center,
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  text: TextSpan(
                                      text: '￥',
                                      style: TextStyle(
                                          fontSize: EsSizes.XXS,
                                          color: EsColors.Primary,
                                          fontWeight: EsFontWeights.Normal),
                                      children: <TextSpan>[
                                        TextSpan(
                                            text: '4290.00',
                                            style: TextStyle(
                                                fontSize: EsSizes.LG,
                                                color: EsColors.Primary,
                                                fontWeight:
                                                    EsFontWeights.Medium)),
                                      ]),
                                ),
                              ),
                              Column(
                                children: [
                                  Row(
                                    children: [
                                      EsIconButton(
                                        Image(
                                          image: AssetImage(
                                              "assets/images/reduce.png"),
                                          width: 48.w,
                                        ),
                                        padding: EdgeInsets.only(
                                            right: 8, bottom: 2),
                                        onTap: () {
                                          setState(() {
                                            info['num'] = info['num'] <= 0
                                                ? info['num']
                                                : (info['num'] - 1);
                                          });
                                          print('sub');
                                        },
                                      ),
                                      Text(info['num'].toString(),
                                          style: TextStyle(
                                              fontSize: EsSizes.LG,
                                              color: EsColors.TitleSecondary,
                                              fontWeight:
                                                  EsFontWeights.Normal)),
                                      EsIconButton(
                                        Image(
                                          image: AssetImage(
                                              "assets/images/plus.png"),
                                          width: 48.w,
                                        ),
                                        padding:
                                            EdgeInsets.only(left: 8, bottom: 2),
                                        onTap: () {
                                          setState(() {
                                            info['num'] =
                                                info['num'] >= info['beginNum']
                                                    ? info['beginNum']
                                                    : (info['num'] + 1);
                                          });
                                          print('add');
                                        },
                                      )
                                    ],
                                  ),
                                  RichText(
                                    // textAlign: TextAlign.center,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    text: TextSpan(
                                        text: '最高可申请',
                                        style: TextStyle(
                                            fontSize: EsSizes.XS,
                                            color: EsColors.ContentSecondary,
                                            fontWeight: EsFontWeights.Normal),
                                        children: <TextSpan>[
                                          TextSpan(
                                              text: info['beginNum'].toString(),
                                              style: TextStyle(
                                                  fontSize: EsSizes.XS,
                                                  color: EsColors.Primary,
                                                  fontWeight:
                                                      EsFontWeights.Medium)),
                                          TextSpan(
                                              text: '件',
                                              style: TextStyle(
                                                  fontSize: EsSizes.XS,
                                                  color:
                                                      EsColors.ContentSecondary,
                                                  fontWeight:
                                                      EsFontWeights.Normal)),
                                        ]),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                    SizedBox(width: 12),
                  ],
                ),
                SizedBox(height: 6),
                YpLine(indent: 8),
                Visibility(
                  visible: giftList?.isNotEmpty ?? false,
                  child: ListView.builder(
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: giftList?.length ?? '',
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  CachedImage(
                                      width: 60,
                                      height: 60,
                                      margin: EdgeInsets.fromLTRB(5, 0, 12, 12),
                                      scale: BoxFit.cover,
                                      path:
                                          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.16pic.com%2F00%2F59%2F68%2F16pic_5968601_b.jpg&refer=http%3A%2F%2Fphoto.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633348684&t=459b6f711ff2b76838810c8071fe39c2'),
                                  Expanded(
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: [
                                        Row(
                                          children: [
                                            Container(
                                              padding: EdgeInsets.symmetric(
                                                  vertical: 0, horizontal: 3),
                                              margin: EdgeInsets.only(right: 4),
                                              decoration: BoxDecoration(
                                                color:
                                                    EsColors.Pink.withOpacity(
                                                        0.15),
                                                border: Border.all(
                                                  color: EsColors.Pink,
                                                  width: 1,
                                                ),
                                                borderRadius:
                                                    BorderRadius.circular(3),
                                              ),
                                              child: Text(
                                                '赠品',
                                                style: TextStyle(
                                                    color: EsColors.Pink,
                                                    fontSize: EsSizes.XXS,
                                                    fontWeight:
                                                        EsFontWeights.Normal),
                                              ),
                                            ),
                                            Expanded(
                                              child: Text(
                                                'KETO铺子的赠品KETO铺子的赠品KETO铺子的赠品',
                                                maxLines: 1,
                                                overflow: TextOverflow.ellipsis,
                                                style: TextStyle(
                                                    color:
                                                        EsColors.TitleSecondary,
                                                    fontSize: EsSizes.SM,
                                                    fontWeight:
                                                        EsFontWeights.Normal),
                                              ),
                                            ),
                                          ],
                                        ),
                                        SizedBox(height: 15),
                                        Row(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          children: [
                                            Expanded(
                                              child: RichText(
                                                // textAlign: TextAlign.center,
                                                maxLines: 1,
                                                overflow: TextOverflow.ellipsis,
                                                text: TextSpan(
                                                    text: '￥',
                                                    style: TextStyle(
                                                        fontSize: EsSizes.XXS,
                                                        color: EsColors.Primary,
                                                        fontWeight:
                                                            EsFontWeights
                                                                .Normal),
                                                    children: <TextSpan>[
                                                      TextSpan(
                                                          text: '4290.00',
                                                          style: TextStyle(
                                                              fontSize:
                                                                  EsSizes.LG,
                                                              color: EsColors
                                                                  .Primary,
                                                              fontWeight:
                                                                  EsFontWeights
                                                                      .Medium)),
                                                    ]),
                                              ),
                                            ),
                                            Text(
                                                'x' +
                                                    giftList[index]['num']
                                                        .toString(),
                                                style: TextStyle(
                                                    fontSize: EsSizes.MD,
                                                    color: EsColors
                                                        .ContentSecondary,
                                                    fontWeight:
                                                        EsFontWeights.Normal)),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                  SizedBox(width: 12),
                                ],
                              ),
                              YpLine(),
                            ],
                          ),
                        );
                      }),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  /// 退回赠送的东西
  Widget _giftBack() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(12, 12, 12, 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Text(
            '*以下赠品您需要退回',
            style: TextStyle(
                color: EsColors.Pink,
                fontSize: EsSizes.SM,
                fontWeight: EsFontWeights.Normal),
          ),
          SizedBox(height: 8),
          ListView.builder(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemCount: 3,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.only(bottom: 4),
                  child: Row(children: [
                    Expanded(
                      child: Text(
                        'DHC护唇膏',
                        style: TextStyle(
                            color: EsColors.Content,
                            fontSize: EsSizes.SM,
                            fontWeight: EsFontWeights.Normal),
                      ),
                    ),
                    Text(
                      'x3',
                      style: TextStyle(
                          color: EsColors.Content,
                          fontSize: EsSizes.SM,
                          fontWeight: EsFontWeights.Normal),
                    ),
                  ]),
                );
              })
        ],
      ),
    );
  }

  /// 售后原因 问题描述
  Widget _reason() {
    return Container(
      padding: const EdgeInsets.fromLTRB(12, 12, 0, 12),
      color: EsColors.White,
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Row(
          children: [
            Text(
              '售后原因',
              style: TextStyle(
                  color: EsColors.Content,
                  fontSize: EsSizes.SM,
                  fontWeight: EsFontWeights.Normal),
            ),
            Expanded(
                child: GestureDetector(
              onTap: () {
                setState(() {
                  _afterMarker = !_afterMarker;
                });
              },
              child: Text(
                _afterMarker ? '其他' : '请选择',
                textAlign: TextAlign.end,
                style: TextStyle(
                    color: _afterMarker
                        ? EsColors.TitleSecondary
                        : EsColors.ContentSecondary,
                    fontSize: EsSizes.MD,
                    fontWeight: EsFontWeights.Normal),
              ),
            )),
            SizedBox(width: 4),
            Icon(
              Icons.more_horiz,
              color: EsColors.Content,
            ),
            SizedBox(width: 12),
          ],
        ),
        SizedBox(height: 12),
        YpLine(),
        SizedBox(height: 12),
        Text(
          '问题描述',
          style: TextStyle(
              color: EsColors.Content,
              fontSize: EsSizes.SM,
              fontWeight: EsFontWeights.Normal),
        ),
        SizedBox(height: 12),
        Padding(
          padding: const EdgeInsets.only(right: 12, bottom: 25),
          child: TextField(
            onTap: () {
              print('输入订单备注');
            },
            maxLines: 5,
            style: TextStyle(
              fontSize: EsSizes.SM,
              color: EsColors.TitleSecondary,
            ),
            inputFormatters: [LengthLimitingTextInputFormatter(500)],
            cursorColor: EsColors.Content,
            decoration: InputDecoration(hintText: '您可以在这里详细地描述商品的问题（500字）'),
          ),
        ),
        Row(
          children: [
            Wrap(
              runSpacing: 12,
              spacing: 12,
              children: List.generate(
                  _imageList.length,
                  (index) => Stack(
                        clipBehavior: Clip.none,
                        children: [
                          CachedImage(
                              width: MediaQuery.of(context).size.width / 4 - 14,
                              height:
                                  MediaQuery.of(context).size.width / 4 - 14,
                              path: _imageList[index]),
                          Positioned(
                              right: -5,
                              top: -5,
                              child: GestureDetector(
                                onTap: () {
                                  setState(() {
                                    _imageList.removeAt(index);
                                  });
                                },
                                child: Container(
                                  decoration: BoxDecoration(
                                      color: EsColors.Content,
                                      borderRadius: BorderRadius.circular(10)),
                                  child: Icon(
                                    Icons.highlight_off,
                                    color: EsColors.White,
                                    size: 16,
                                  ),
                                ),
                              ))
                        ],
                      )),
            ),
            Visibility(
              visible: _imageList.length != 4,
              child: Container(
                margin: const EdgeInsets.only(left: 8),
                width: MediaQuery.of(context).size.width / 4 - 14,
                height: MediaQuery.of(context).size.width / 4 - 14,
                decoration: BoxDecoration(
                    border: Border.all(
                      color: EsColors.BackGround,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(3)),
                child: EsIconButton(
                  Icon(
                    Icons.camera_alt,
                    size: 30,
                  ),
                  onTap: () {
                    setState(() {
                      _imageList.add(
                          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170318%2F97a393172e6e470786870debc91127bf_th.jpeg&refer=http%3A%2F%2Fimg.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633352348&t=0ba64931f430043125c5c16a33b3ca3e');
                    });
                  },
                ),
              ),
            )
          ],
        )
      ]),
    );
  }

  Widget _bottom() {
    return EsBottomWidget(
        leftTitle: null,
        rightTitle: '提交申请',
        rightlick: () {
          Get.toNamed(RouteConfig.afterMarketDetail);
        });
  }
}
